<template>
    <div class="sys-search">
        <el-form :model="searchForm" :label-position="$store.labelPosition" label-width="25%">
            <el-col :xs="23" :sm="12">
                <el-form-item label="订单号：" >
                    <el-input v-model="searchForm.orderNo" placeholder="请输入订单号"></el-input>
                </el-form-item>
            </el-col>

            <el-col :xs="23" :sm="12">
                <el-form-item label="客户：">
                    <el-select v-model="searchForm.custId" clearable filterable
                               placeholder="请选择客户" style="width: 100%;">
                        <el-option v-for="cust in customers" :key="cust.id"
                                   :label="cust.name" :value="cust.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :xs="23" :sm="12">

                <el-form-item label="时间范围：">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="开始日期" v-model="searchForm.fromDate"
                                        value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                                        clearable style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="centerText" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="结束时间" v-model="searchForm.toDate"
                                        value-format="yyyy-MM-dd" format="yyyy-MM-dd" clearable style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
            </el-col>
            <el-col :xs="23" :sm="12">

                <el-form-item label="订单状态：" >
                    <el-select v-model="searchForm.status" clearable placeholder="请选择" style="width: 100%;">
                        <el-option v-for="st in statusList" :key="st.code"
                                   :label="st.description" :value="st.code">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :xs="23" :sm="12">
                <el-form-item label="业务员：" prop="sellMan">
                    <el-select v-model="searchForm.sellMan" clearable placeholder="请选择业务员">
                        <el-option v-for="sell in sells" :key="sell.userId"
                                   :label="sell.username" :value="sell.userId"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>

        </el-form>

        <el-col :xs="23" :sm="12" :offset="3">
            <el-button type="primary" icon="el-icon-search" @click="searchOrdersByCriteria()">查询</el-button>
        </el-col>

        <table-mixin pagination paginationAlign="left" :paginationTotal="paginationTotal"
                     :pageChange="pageChange">
        <el-table v-loading="tableData.loading" :data="tableData.body" stripe border style="width:100%">
            <el-table-column label="订单号" prop="orderNo" min-width="10%"></el-table-column>
            <el-table-column label="客户名称" prop="custName" min-width="28%" ></el-table-column>
            <el-table-column label="接单日期" prop="orderDtStr" min-width="10%"></el-table-column>
            <el-table-column label="付款日期" prop="payDtStr" min-width="10%"></el-table-column>
            <el-table-column label="总金额" prop="totalAmountStr" min-width="10%"
                             align="right" header-align="center"></el-table-column>
            <el-table-column label="要求出货日期" prop="requireOutDtStr" min-width="10%"></el-table-column>
            <el-table-column label="订单状态"  min-width="8%" >
                <template slot-scope="scope">
                    <el-tag type="danger" v-if="scope.row.status == 0">{{scope.row.statusDescr}}</el-tag>
                    <el-tag type="warning" v-if="scope.row.status == 1">{{scope.row.statusDescr}}</el-tag>
                    <el-tag type="success" v-if="scope.row.status == 2">{{scope.row.statusDescr}}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="操作" class-name="centerCell" min-width="24%">
                <template slot-scope="scope">
                    <el-button type="edit" size="small" icon="el-icon-edit-outline"
                        @click="gotoEditReceipt(scope.row.id)">开票</el-button>
                    <el-button type="primary" size="small" icon="el-icon-view"
                        @click="gotoViewReceipt(scope.row.id)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        </table-mixin>

    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
    name: "OrderSearch",
    data() {
        return {
            searchForm: {
                orderNo: '',
                fromDate: '',
                toDate: '',
                custId: '',
                status: '',
                sellMan: ''
            },

            tableData: {
                loading: true,
                body: []
            },
            currentPage: 1,
            paginationTotal: 0
        }
    },

    mounted() {
        this.searchOrdersByCriteria()
        console.log("status: ", this.$store.state.receipt.initPageData.statusList)
    },

    methods: {
        searchOrdersByCriteria(){
            this.currentPage = 1;
            this.searchOrder();
        },

        // 获取table数据
        async searchOrder() {
            console.log("this.currentPage: ", this.currentPage);
            let params = {
                pageSize: this.$store.state.pageSize,
                pageNo: this.currentPage};
            Object.assign(params,this.searchForm);
            let res = await this.$axios.get('/sell/order/list', params);

            console.log("返回订单列表：", res);
            this.tableData.loading = false;
            this.tableData.body = res.rows;
            this.paginationTotal = res.total;
        },

        pageChange(currentPage) {
            console.log(`当前第${currentPage}页`)
            this.currentPage = currentPage;
            this.searchOrder();
        },

        gotoEditReceipt(orderId) {
            this.$store.commit("receipt/Show_Receipt_List", orderId);
        },

        gotoViewReceipt(orderId) {
            this.$store.dispatch('receipt/showViewReceipt', orderId)
        },
    },

    computed: {
        ...mapState({
            customers: state => state.receipt.initPageData.customers,
            sells: state => state.receipt.initPageData.sells,
            statusList: state => state.receipt.initPageData.statusList,
        }),
    }
}
</script>

